<template>
  <div id="app">
      <el-row :gutter="10">
        <el-col :span="2" style="text-align: center;padding-top: 10px;">
          <span>持续时间：</span>
        </el-col>
        <el-col :span="4">
          <el-input type="text" v-model.number="duration" placeholder="请输入持续时间"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="2" style="text-align: center;padding-top: 10px;">
          <span>偏移量：</span>
        </el-col>
        <el-col :span="4">
          <el-input type="text" v-model.number="offsetVal" placeholder="请输入偏移量"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2" style="text-align: center;padding-top: 10px;">
          <span>消息类型：</span>
        </el-col>
        <el-col :span="4">
          <el-select v-model="type" placeholder="请选择倾向性消息类型">
            <el-option label="成功" value="success"></el-option>
            <el-option label="警告" value="warning"></el-option>
            <el-option label="消息" value="info"></el-option>
            <el-option label="错误" value="error"></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2" style="text-align: center;padding-top: 10px;">
          <span>弹出位置：</span>
        </el-col>
        <el-col :span="4">
          <el-select v-model="position" placeholder="请选择弹出位置">
            <el-option label="右上角" value="top-right"></el-option>
            <el-option label="右下角" value="bottom-right"></el-option>
            <el-option label="左下角" value="bottom-left"></el-option>
            <el-option label="左上角" value="top-left"></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <el-button type="primary" @click="openNotify">基本使用</el-button>
        </el-col>
      </el-row>
    </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      offsetVal: 0,
      duration: 2000,
      type: 'success'
    };
  },
  methods: {
    openMessage() {
      this.$message({
        title: '标题',
        message: '内容',
        offset: this.offsetVal,
        type: this.type,
        duration: this.duration
      });
    }
  }
};
</script>
<style></style>